<template>
    <n-space vertical class="system_admin">
        <n-space>
            <n-button type="primary" @click="addAdminShow = true">新增</n-button>
            <n-button type="error">删除</n-button>
        </n-space>
        <!-- 
            columns => 列信息
            data => 渲染的数据
         -->
        <n-data-table :columns="columns" :data="data" />
    </n-space>
    <!--添加的模态框   -->
    <n-modal v-model:show="addAdminShow" preset="dialog" title="添加管理员信息" positive-text="确认" negative-text="取消"
        @positive-click="addAdminInfo" style="width: 600px;">
        <n-form ref="adminRef" label-placement="left" :model="adminInfo" :rules="adminRules">
            <n-grid>
                <n-form-item-gi :span="12" label="账号" path="adminname">
                    <n-input placeholder="请输入账号" v-model:value="adminInfo.adminname" />
                </n-form-item-gi>
                <n-form-item-gi :span="12" label="密码" path="password">
                    <n-input placeholder="请输入密码" v-model:value="adminInfo.password" />
                </n-form-item-gi>
                <n-form-item-gi :span="24" label="">
                    <n-select placeholder="请选择管理员" :options="adminList" v-model:value="adminInfo.role" />
                </n-form-item-gi>
            </n-grid>
        </n-form>
    </n-modal>

    <!-- 修改的模态框 -->
    <n-modal v-model:show="updateAdminShow" @positive-click="updateminInfo" preset="dialog" title="修改管理权限"
        positive-text="确认" negative-text="取消">
        <n-tree ref="treeRef" cascade checkable default-expand-all :default-checked-keys="userInfo.checkedKeys" :data="treeDate" />
    </n-modal>
</template>

<script>

import { NTag, NButton, NSpace, NPopconfirm } from 'naive-ui'
import { h } from 'vue';
import { addAdminInfoAPI, getAdminListAPI, delAdminInfoAPI ,updateAdminInfoAPI} from "../../../api/user.js"
import  routerAsync  from '../../../router/routerAsync.js';
export default {
    name: 'system_admin',
    data() {
        return {
           
            //表格需要的数据
            //用户数据
            userInfo: {},
            updateAdminShow:false,
            columns: [
                { title: "用户名称", key: "adminname" },
                {
                    title: "用户角色", key: "role",
                    render(row) {
                        return h(NTag, { type: row.role == 2 ? 'warning' : 'info' }, { default: () => row.role == 2 ? '超级管理员' : '普通管理员' })
                    }
                },
                {
                    title: "用户操作",
                    render: (row) => {
                        return h(
                            NSpace,
                            {},
                            [
                                h(NButton, { type: 'success', onClick: () => { this.updateAdminShow = true, this.userInfo = row } }, { default: () => "用户菜单权限" }),
                                h(NPopconfirm, { negativeText: "取消", positiveText: "确定", onPositiveClick: () => { this.delAdminInfo(row.adminid) } }, {
                                    default: () => "您确定要删除吗?",
                                    trigger: () => h(NButton, { type: 'error' }, { default: () => '删除' })
                                })
                            ]
                        )
                    }
                }
            ],
            data: [],
            //添加的管理的模块化
            addAdminShow: false,
            adminList: [
                { label: "管理员", value: 1 },
                { label: "超级管理员", value: 2 },
            ],//收集表单信息
            adminInfo: {
                adminname: "",
                password: "",
                role: 1,//1是管理员,2是超级管理员
            },
            adminRules: {
                adminname: { required: true, message: '账号不能为空!', trigger: ["input"] },
                password: { required: true, message: '密码不能为空!', trigger: ["input"] },
            }
        }
    },
    computed :{
        treeDate(){
            return this.renderMenu(routerAsync);
        }
    },
    methods: {

        //TODO 点击修改的权限的确认按钮
        async updateminInfo(){
            let { keys } = this.$refs.treeRef.getCheckedData();

            keys = keys.filter(item=>item != "0-0")
            const obj = {
                adminname:this.userInfo.adminname,
                password:this.userInfo.password,
                role : this.userInfo.role,
                checkedKeys : keys
            }
            console.log(obj);
            await updateAdminInfoAPI(obj)
            
            this.getAdminList();
        }, 
         //TODO 动态数据菜单栏的加工处理
         
         renderMenu(routerAsync){
            let result = routerAsync.map(item=>{
                if(item.children){
                    return{
                        label:item.meta.label,
                        key:item.name,
                        children:item.children
                    }
                }else{
                    return{
                        label:item.meta.label,
                        key:item.name
                    }
                }
            })
            result.forEach(item=>{
                if(item.children){
                    //地怪
                    item.children = this.renderMenu(item.children)
                }
            })
            return result;
        },

        //TODO 添加管理员信息
        async addAdminInfo() {
            //console.log(result);
            try {
                const result = await this.$refs.adminRef.validate()
                if (!result) {
                    //发送ajax
                    const params = {
                        adminname: this.adminInfo.adminname,
                        password: this.adminInfo.password,
                        role: this.adminInfo.role,
                        checkedKeys: []
                    }
                    addAdminInfoAPI(params)

                } else {
                    this.$message.error('不可以添加')
                }
            } catch (error) {
                this.$message.warning("校验不通过")
            }
            //获取数据
            this.getAdminList()
            this.adminInfo.adminname = "",
                this.adminInfo.password = "" 
            //window.location.reload()   
        },
        //TODO 获取管理员信息
        async getAdminList() {
            const result = await getAdminListAPI()
            if (result.code == '200') {
                this.data = result.data
            }
        },
        //TODO 删除管理员信息
        async delAdminInfo(id) {
            console.log(id);
            await delAdminInfoAPI({ adminid: id })
            this.getAdminList();
        }
    },
    mounted() {
        //获取管理员信息
        this.getAdminList()

       
    }
}
</script>

<style scoped lang="scss">
.system_admin {
    padding: 16px;
    border-radius: 16px;
    background-color: #fff;
}
</style>